<template>
	<ToolbarItemContainer
		:iconFile="productIcon"
		:iconWidth="isUniFrameWork ? '26px' : '20px'"
		:iconHeight="isUniFrameWork ? '26px' : '20px'"
		ref="container"
		@onDialogClose="closeDialog"
		@onDialogShow="openDialog"
	>
		<div class="product-box">
			<div class="product-header">
				{{ $t('Prod.productList') }}

				<el-form @keyup.enter="getProdList">
					<el-form-item>
						<el-input
							clearable
							@clear="getProdList"
							v-model="searchWord"
							class="w-50 m-2"
							:placeholder="$t('Prod.inputProductName')"
							prefix-icon="Search"
						/>
					</el-form-item>
				</el-form>
			</div>
			<div class="product-list" ref="productBox" v-infinite-scroll="scrollFn">
				<div class="product-item" v-for="item in prodList" :key="item.id">
					<div class="product-item-image">
						<el-image style="width: 80px; height: 80px; border-radius: 8px" :src="$getFileUri(item.pic)" />
					</div>
					<div class="product-item-info">
						<div class="info-title">
							{{ item.name }}
						</div>

						<div class="info-price">
							{{ $amountFormat(item.amount) }}
						</div>
					</div>
					<div class="product-item-sent">
						<el-button @click="sendMessage(item)">Send</el-button>
					</div>
				</div>
				<div v-if="isLoad" style="display: flex; justify-content: center; margin-top: 10px">
					<el-icon :size="20">
						<Loading />
					</el-icon>
				</div>

				<el-empty v-if="prodList.length == 0" :description="$t('common.noData')" />
			</div>
		</div>
	</ToolbarItemContainer>
</template>
<script lang="ts" setup>
import productIcon from '../../../../assets/icon/product.svg';
import ToolbarItemContainer from '../toolbar-item-container/index.vue';
import { isUniFrameWork } from '/@/TUIKit/utils/env';
import { getPage } from '/@/api/bizs/Prod';
import { TUIChatService } from '@tencentcloud/chat-uikit-engine';
import { useMessage } from '/@/hooks/message';
import { Loading } from '@element-plus/icons-vue';
import {amountFormat, getFileUri} from "/@/utils/util";

const searchWord = ref('');
const productBox = ref();
const container = ref();
const isLoad = ref<boolean>(false);
const total = ref<number>(0);
interface IProd {
	createBy: string;
	createTime: string;
	updateBy: string;
	updateTime: string;
	search?: any;
	rangeTime?: any;
	id: string;
	shopId: string;
	name: string;
	brief: string;
	categoryId: string;
	categoryPath: string;
	originAmount: number;
	amount: number;
	sn: string;
	model: string;
	pic: string;
	banner: any[];
	thumbnail: any[];
	desc: string;
	descPic: any[];
	saleNum: number;
	totalStocks: number;
	isSale: boolean;
	isCustomizable: boolean;
	isRecommend: boolean;
	isHot: boolean;
	deliveryType: number;
	deliveryAddress: string;
	deliveryCycle: number;
	deliveryTemplateId: string;
	commissionType: number;
	commissionValue: number;
	sort: number;
	source: string;
	sourceUrl: string;
	version: number;
	delFlag: boolean;
}

const prodList = ref<IProd[]>([]);
const getProdList = async (type?: string) => {
	isLoad.value = true;
	if (type !== 'push') {
		prodList.value = [];
		searchParams.current = 1;
	} else {
		searchParams.current++;
	}
	let res = await getPage({
		search: searchWord.value,
		...searchParams,
	});
	isLoad.value = false;
  total.value = res.data.total;
	if (type !== 'push') {
		productBox.value.scrollTop = 0;
		prodList.value = res.data.records;
	} else {
		// 滚动加载
		prodList.value = [...prodList.value, ...res.data.records];
	}
};

// 关闭dialog
const closeDialog = () => {
	searchWord.value = '';
};

// 打开dialog
const openDialog = () => {
	getProdList();
};

/**
 * 发送消息
 * @param {item} IProd
 */

let searchParams = reactive({
	size: 10,
	current: 1,
});
const scrollFn = () =>{
  if(total.value > prodList.value.length){
    getProdList("push")
  }
};

const sendMessage = (item: IProd) => {
	let promise = TUIChatService.sendCustomMessage({
		payload: {
			data: JSON.stringify({
				// 订单类消息标识字段
				businessID: 'product',
				// 订单标题
				title: item.name,
				// 订单描述
				description: '',
				// 订单金额
				price: amountFormat(item.amount),
				// 图片
				imageUrl: getFileUri(item.pic),

				...item,
			}),
			description: '',
			extension: '',
		},
	});

	promise.then(() => {
		container.value.toggleDialogDisplay(false);
	});

	promise.catch((err) => {
		console.log(err, 'err121321');
		useMessage().error('登录超时，请重新刷新页面或重新登陆');
	});
};
</script>
<style lang="scss" scoped>
.product-box {
	width: 400px;
	padding: 0 10px 10px;
	background-color: #f7f7f7;

	.product-header {
		position: sticky;
		top: 0;
		z-index: 1;
		background-color: #f7f7f7;
		padding: 10px 0;
	}

	.product-list {
		max-height: 500px;
		overflow: auto;

		.product-item {
			display: flex;
			padding: 10px;
			background-color: #fff;
			margin-top: 10px;
			border-radius: 10px;
			gap: 10px;

			&-info {
				width: 0;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding-bottom: 10px;

				.info-title {
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.info-price {
					font-weight: 700;
					font-size: 16px;
				}
			}
		}
	}
}

:deep(.el-input) {
	margin: 0;
}
</style>
